<template>
    <el-button class="m-1" type="success" @click="visible = true">
        {{buttonText}}
    </el-button>

    <el-dialog  width="500px" v-model="visible" title="选择投影坐标系类型" class="text-center dialog">

        <CustomForm @submit="submit" :dialog-visible="visible" @update:dialog-visible="visible = $event"
            :field-list="fieldList">
            <template #coordinateSystem>
                <div style="margin-bottom:20px">
                    <el-radio-group v-model="radio" @change="radioChange">
                        <el-radio :label="1">国家2000的投影坐标系（3度带）</el-radio>
                        <el-radio :label="2">国家2000的投影坐标系（6度带）</el-radio>
                        <el-radio :label="3">北京54投影坐标系</el-radio>
                        <el-radio :label="4">西安80投影坐标系</el-radio>
                        <el-radio :label="5">WGS84经纬度地理坐标</el-radio>
                    </el-radio-group>
                </div>
            </template>

            <template #reel>
                <div style="margin-bottom:20px">
                    <el-radio-group   v-model="reel" @change="radioChange">
                        <el-radio :label="1">含带号</el-radio>
                        <el-radio :label="2">不含带号</el-radio>
                    </el-radio-group>
                </div>
            </template>
            <template #choice>
                <div class="choice">
                    <SelectInput style="width: 100%;"  ref="selectInputRef" :options="options" v-model="currentChose" />
                </div>
            </template>
        </CustomForm>

    </el-dialog>
</template>
    
<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import SelectInput from "@/components/common/selectInput/SelectInput.vue"
import CustomForm from '@/components/common/form/CustomForm.vue'
import * as _ from 'lodash'
import { ElMessage } from 'element-plus';


defineProps({
    buttonText: {
        type: String,
        default: "查看当前坐标系"
    }
})


const fieldList = ref([{
    name: "coordinateSystem",
    label: "坐标系",
    type: "SLOT"
}, {
    name: "reel",
    label: "带号",
    type: "SLOT"
}, {
    name: "choice",
    label: "选择",
    type: "SLOT"
}])




const store = useStore()
const open = () => {
    console.log("open this chose coordinateSystem")
}

const visible = ref(false)
const disabled = ref(true)
const radio = ref(1)
const reel = ref(1)

const options = ref({})

const currentChose = ref("")


const selectInputRef = ref(null);

onMounted(() => {
    //这里对currentChose 进行初始化

    console.log(store);
    currentChose.value = store.getters["getEPSG"]
    //根据已有的EPSG值 来计算 radio 和 options 的算法
    initOptionsAndRadios(_.parseInt(store.getters["getEPSG"]))

    options.value = getOptions()


})

const initOptionsAndRadios = (epsgNum: number) => {
    //国家2000的投影坐标系（3度带）
    if (epsgNum >= 4513 && epsgNum <= 4554) {
        radio.value = 1
    }

    switch (true) {
        case (epsgNum >= 4513 && epsgNum <= 4533): radio.value = 1; reel.value = 1; break;
        case (epsgNum >= 4534 && epsgNum <= 4554): radio.value = 1; reel.value = 2; break;

        case (epsgNum >= 4491 && epsgNum <= 4501): radio.value = 2; reel.value = 1; break;
        case (epsgNum >= 4502 && epsgNum <= 4512): radio.value = 2; reel.value = 2; break;

        case (epsgNum >= 2401 && epsgNum <= 2421): radio.value = 3; reel.value = 1; break;
        case (epsgNum >= 2422 && epsgNum <= 2442): radio.value = 3; reel.value = 2; break;

        case (epsgNum >= 2349 && epsgNum <= 2369): radio.value = 4; reel.value = 1; break;
        case (epsgNum >= 2370 && epsgNum <= 2390): radio.value = 4; reel.value = 2; break;
        default: radio.value = 1; reel.value = 1;
    }
}

const radioChange = () => {

    options.value = getOptions();

    (selectInputRef.value as any).changeOptions(options.value, false, null, null)

    if(radio.value == 5){
        currentChose.value = "4326"
    }else{
        currentChose.value = ""
    }
   
}

const submit = () => {

    console.log(currentChose.value)

    if (currentChose.value == "") {
        ElMessage({
            message: "请选择坐标系...",
            type: "warning"
        })
    } else {
        store.commit("EPSG", currentChose.value)
        visible.value = false
    }

}


const getOptions = () => {

    console.log(radio.value)

    
    if(radio.value == 5){
        return []
    }
    if (reel.value == 1) {
        //用带号
        switch (radio.value) {
            case 1: return China2000ThreeUseReel.value
            case 2: return China2000SixUseReel.value
            case 3: return Beijing54UseReel.value
            case 4: return XiAn80UseReel.value
            default: return China2000ThreeUseReel.value
        }
    } else {
        //不用带号
        switch (radio.value) {
            case 1: return China2000Three.value
            case 2: return China2000Six.value
            case 3: return Beijing54.value
            case 4: return XiAn80.value
            default: return China2000Three.value
        }
    }
}


const China2000ThreeUseReel = ref([{ "label": "带号:25,经度:73.5~76.5,中央经线:75", "value": "4513" }, { "label": "带号:26,经度:76.5~79.5,中央经线:78", "value": "4514" }, { "label": "带号:27,经度:79.5~82.5,中央经线:81", "value": "4515" }, { "label": "带号:28,经度:82.5~85.5,中央经线:84", "value": "4516" }, { "label": "带号:29,经度:85.5~88.5,中央经线:87", "value": "4517" }, { "label": "带号:30,经度:88.5~91.5,中央经线:90", "value": "4518" }, { "label": "带号:31,经度:91.5~94.5,中央经线:93", "value": "4519" }, { "label": "带号:32,经度:94.5~97.5,中央经线:96", "value": "4520" }, { "label": "带号:33,经度:97.5~100.5,中央经线:99", "value": "4521" }, { "label": "带号:34,经度:100.5~103.5,中央经线:102", "value": "4522" }, { "label": "带号:35,经度:103.5~106.5,中央经线:105", "value": "4523" }, { "label": "带号:36,经度:106.5~109.5,中央经线:108", "value": "4524" }, { "label": "带号:37,经度:109.5~112.5,中央经线:111", "value": "4525" }, { "label": "带号:38,经度:112.5~115.5,中央经线:114", "value": "4526" }, { "label": "带号:39,经度:115.5~118.5,中央经线:117", "value": "4527" }, { "label": "带号:40,经度:118.5~121.5,中央经线:120", "value": "4528" }, { "label": "带号:41,经度:121.5~124.5,中央经线:123", "value": "4529" }, { "label": "带号:42,经度:124.5~127.5,中央经线:126", "value": "4530" }, { "label": "带号:43,经度:127.5~130.5,中央经线:129", "value": "4531" }, { "label": "带号:44,经度:130.5~133.5,中央经线:132", "value": "4532" }, { "label": "带号:45,经度:133.5~136.5,中央经线:135", "value": "4533" }])
const China2000Three = ref([{ "label": "经度:73.5~76.5,中央经线:75", "value": "4534" }, { "label": "经度:76.5~79.5,中央经线:78", "value": "4535" }, { "label": "经度:79.5~82.5,中央经线:81", "value": "4536" }, { "label": "经度:82.5~85.5,中央经线:84", "value": "4537" }, { "label": "经度:85.5~88.5,中央经线:87", "value": "4538" }, { "label": "经度:88.5~91.5,中央经线:90", "value": "4539" }, { "label": "经度:91.5~94.5,中央经线:93", "value": "4540" }, { "label": "经度:94.5~97.5,中央经线:96", "value": "4541" }, { "label": "经度:97.5~100.5,中央经线:99", "value": "4542" }, { "label": "经度:100.5~103.5,中央经线:102", "value": "4543" }, { "label": "经度:103.5~106.5,中央经线:105", "value": "4544" }, { "label": "经度:106.5~109.5,中央经线:108", "value": "4545" }, { "label": "经度:109.5~112.5,中央经线:111", "value": "4546" }, { "label": "经度:112.5~115.5,中央经线:114", "value": "4547" }, { "label": "经度:115.5~118.5,中央经线:117", "value": "4548" }, { "label": "经度:118.5~121.5,中央经线:120", "value": "4549" }, { "label": "经度:121.5~124.5,中央经线:123", "value": "4550" }, { "label": "经度:124.5~127.5,中央经线:126", "value": "4551" }, { "label": "经度:127.5~130.5,中央经线:129", "value": "4552" }, { "label": "经度:130.5~133.5,中央经线:132", "value": "4553" }, { "label": "经度:133.5~136.5,中央经线:135", "value": "4554" }])

const China2000SixUseReel = ref([{ "label": "带号:13,经度:72~78,中央经线:75", "value": "4491" }, { "label": "带号:14,经度:78~84,中央经线:81", "value": "4492" }, { "label": "带号:15,经度:84~90,中央经线:87", "value": "4493" }, { "label": "带号:16,经度:90~96,中央经线:93", "value": "4494" }, { "label": "带号:17,经度:96~102,中央经线:99", "value": "4495" }, { "label": "带号:18,经度:102~108,中央经线:105", "value": "4496" }, { "label": "带号:19,经度:108~114,中央经线:111", "value": "4497" }, { "label": "带号:20,经度:114~120,中央经线:117", "value": "4498" }, { "label": "带号:21,经度:120~126,中央经线:123", "value": "4499" }, { "label": "带号:22,经度:126~132,中央经线:129", "value": "4500" }, { "label": "带号:23,经度:132~138,中央经线:135", "value": "4501" }])
const China2000Six = ref([{ "label": "经度:72~78,中央经线:75", "value": "4502" }, { "label": "经度:78~84,中央经线:81", "value": "4503" }, { "label": "经度:84~90,中央经线:87", "value": "4504" }, { "label": "经度:90~96,中央经线:93", "value": "4505" }, { "label": "经度:96~102,中央经线:99", "value": "4506" }, { "label": "经度:102~108,中央经线:105", "value": "4507" }, { "label": "经度:108~114,中央经线:111", "value": "4508" }, { "label": "经度:114~120,中央经线:117", "value": "4509" }, { "label": "经度:120~126,中央经线:123", "value": "4510" }, { "label": "经度:126~132,中央经线:129", "value": "4511" }, { "label": "经度:132~138,中央经线:135", "value": "4512" }])

const Beijing54UseReel = ref([{ "label": "带号:25,经度:73.5~76.5,中央经线:75", "value": "2401" }, { "label": "带号:26,经度:76.5~79.5,中央经线:78", "value": "2402" }, { "label": "带号:27,经度:79.5~82.5,中央经线:81", "value": "2403" }, { "label": "带号:28,经度:82.5~85.5,中央经线:84", "value": "2404" }, { "label": "带号:29,经度:85.5~88.5,中央经线:87", "value": "2405" }, { "label": "带号:30,经度:88.5~91.5,中央经线:90", "value": "2406" }, { "label": "带号:31,经度:91.5~94.5,中央经线:93", "value": "2407" }, { "label": "带号:32,经度:94.5~97.5,中央经线:96", "value": "2408" }, { "label": "带号:33,经度:97.5~100.5,中央经线:99", "value": "2409" }, { "label": "带号:34,经度:100.5~103.5,中央经线:102", "value": "2410" }, { "label": "带号:35,经度:103.5~106.5,中央经线:105", "value": "2411" }, { "label": "带号:36,经度:106.5~109.5,中央经线:108", "value": "2412" }, { "label": "带号:37,经度:109.5~112.5,中央经线:111", "value": "2413" }, { "label": "带号:38,经度:112.5~115.5,中央经线:114", "value": "2414" }, { "label": "带号:39,经度:115.5~118.5,中央经线:117", "value": "2415" }, { "label": "带号:40,经度:118.5~121.5,中央经线:120", "value": "2416" }, { "label": "带号:41,经度:121.5~124.5,中央经线:123", "value": "2417" }, { "label": "带号:42,经度:124.5~127.5,中央经线:126", "value": "2418" }, { "label": "带号:43,经度:127.5~130.5,中央经线:129", "value": "2419" }, { "label": "带号:44,经度:130.5~133.5,中央经线:132", "value": "2420" }, { "label": "带号:45,经度:133.5~136.5,中央经线:135", "value": "2421" }])

const Beijing54 = ref([{ "label": "经度:73.5~76.5,中央经线:75", "value": "2422" }, { "label": "经度:76.5~79.5,中央经线:78", "value": "2423" }, { "label": "经度:79.5~82.5,中央经线:81", "value": "2424" }, { "label": "经度:82.5~85.5,中央经线:84", "value": "2425" }, { "label": "经度:85.5~88.5,中央经线:87", "value": "2426" }, { "label": "经度:88.5~91.5,中央经线:90", "value": "2427" }, { "label": "经度:91.5~94.5,中央经线:93", "value": "2428" }, { "label": "经度:94.5~97.5,中央经线:96", "value": "2429" }, { "label": "经度:97.5~100.5,中央经线:99", "value": "2430" }, { "label": "经度:100.5~103.5,中央经线:102", "value": "2431" }, { "label": "经度:103.5~106.5,中央经线:105", "value": "2432" }, { "label": "经度:106.5~109.5,中央经线:108", "value": "2433" }, { "label": "经度:109.5~112.5,中央经线:111", "value": "2434" }, { "label": "经度:112.5~115.5,中央经线:114", "value": "2435" }, { "label": "经度:115.5~118.5,中央经线:117", "value": "2436" }, { "label": "经度:118.5~121.5,中央经线:120", "value": "2437" }, { "label": "经度:121.5~124.5,中央经线:123", "value": "2438" }, { "label": "经度:124.5~127.5,中央经线:126", "value": "2439" }, { "label": "经度:127.5~130.5,中央经线:129", "value": "2440" }, { "label": "经度:130.5~133.5,中央经线:132", "value": "2441" }, { "label": "经度:133.5~136.5,中央经线:135", "value": "2442" }])

const XiAn80UseReel = ref([{ "label": "带号:25,经度:73.5~76.5,中央经线:75", "value": "2349" }, { "label": "带号:26,经度:76.5~79.5,中央经线:78", "value": "2350" }, { "label": "带号:27,经度:79.5~82.5,中央经线:81", "value": "2351" }, { "label": "带号:28,经度:82.5~85.5,中央经线:84", "value": "2352" }, { "label": "带号:29,经度:85.5~88.5,中央经线:87", "value": "2353" }, { "label": "带号:30,经度:88.5~91.5,中央经线:90", "value": "2354" }, { "label": "带号:31,经度:91.5~94.5,中央经线:93", "value": "2355" }, { "label": "带号:32,经度:94.5~97.5,中央经线:96", "value": "2356" }, { "label": "带号:33,经度:97.5~100.5,中央经线:99", "value": "2357" }, { "label": "带号:34,经度:100.5~103.5,中央经线:102", "value": "2358" }, { "label": "带号:35,经度:103.5~106.5,中央经线:105", "value": "2359" }, { "label": "带号:36,经度:106.5~109.5,中央经线:108", "value": "2360" }, { "label": "带号:37,经度:109.5~112.5,中央经线:111", "value": "2361" }, { "label": "带号:38,经度:112.5~115.5,中央经线:114", "value": "2362" }, { "label": "带号:39,经度:115.5~118.5,中央经线:117", "value": "2363" }, { "label": "带号:40,经度:118.5~121.5,中央经线:120", "value": "2364" }, { "label": "带号:41,经度:121.5~124.5,中央经线:123", "value": "2365" }, { "label": "带号:42,经度:124.5~127.5,中央经线:126", "value": "2366" }, { "label": "带号:43,经度:127.5~130.5,中央经线:129", "value": "2367" }, { "label": "带号:44,经度:130.5~133.5,中央经线:132", "value": "2368" }, { "label": "带号:45,经度:133.5~136.5,中央经线:135", "value": "2369" }])
const XiAn80 = ref([{ "label": "经度:73.5~76.5,中央经线:75", "value": "2370" }, { "label": "经度:76.5~79.5,中央经线:78", "value": "2371" }, { "label": "经度:79.5~82.5,中央经线:81", "value": "2372" }, { "label": "经度:82.5~85.5,中央经线:84", "value": "2373" }, { "label": "经度:85.5~88.5,中央经线:87", "value": "2374" }, { "label": "经度:88.5~91.5,中央经线:90", "value": "2375" }, { "label": "经度:91.5~94.5,中央经线:93", "value": "2376" }, { "label": "经度:94.5~97.5,中央经线:96", "value": "2377" }, { "label": "经度:97.5~100.5,中央经线:99", "value": "2378" }, { "label": "经度:100.5~103.5,中央经线:102", "value": "2379" }, { "label": "经度:103.5~106.5,中央经线:105", "value": "2380" }, { "label": "经度:106.5~109.5,中央经线:108", "value": "2381" }, { "label": "经度:109.5~112.5,中央经线:111", "value": "2382" }, { "label": "经度:112.5~115.5,中央经线:114", "value": "2383" }, { "label": "经度:115.5~118.5,中央经线:117", "value": "2384" }, { "label": "经度:118.5~121.5,中央经线:120", "value": "2385" }, { "label": "经度:121.5~124.5,中央经线:123", "value": "2386" }, { "label": "经度:124.5~127.5,中央经线:126", "value": "2387" }, { "label": "经度:127.5~130.5,中央经线:129", "value": "2388" }, { "label": "经度:130.5~133.5,中央经线:132", "value": "2389" }, { "label": "经度:133.5~136.5,中央经线:135", "value": "2390" }])



</script>
    
<style scoped>
.choice {
    margin-bottom: 20px;
    width: 80%;
    align-items: start;
    display: flex;
}
</style>